view,
navigator,
input,
scroll-view {
  box-sizing: border-box;
}

button::after {
  border: none;
}

swiper,
scroll-view {
  flex: 1;
  height: 100%;
  overflow: hidden;
}

image {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

// 两行省略
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
// 基础动画
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
// 卡片通用样式
.card-common {
  background-color: $uni-bg-color-white;
  border-radius: $uni-border-radius-base;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  overflow: hidden;
}
.card-common:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
}

// 按钮通用样式
.btn-common {
  display: inline-block;
  padding: 12rpx 24rpx;
  background-color: $uni-color-primary;
  color: #ffffff;
  border-radius: $uni-border-radius-sm;
  font-size: $uni-font-size-base;
  text-align: center;
  transition: all 0.3s ease;
  border: none;
}

.btn-common:active {
  background-color: rgba(0, 102, 255, 0.8);
  transform: scale(0.98);
}

.btn-warning {
  background-color: $uni-color-warning;
}

.btn-warning:active {
  background-color: rgba(255, 125, 0, 0.8);
}

// 文本省略
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 弹性布局工具类
.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.items-center {
  align-items: center;
}

/* 在App.vue或base.scss中添加 */
@media screen and (min-width: 768px) {
  .form-card, .leave-card {
    max-width: 600rpx;
    margin-left: auto;
    margin-right: auto;
    margin: 0 auto;
  }
  .popup-container {
    width: 700rpx !important;
    border-radius: 20rpx;
    margin: auto;
  }
}

@media screen and (max-width: 320px) {
  .weekday, .day-column {
    width: 180rpx; // 在小屏幕上减小列宽
  }

  .teacher-column, .teacher-header {
    width: 150rpx; // 减小教师列宽度
  }
   .notice-card {
    padding: 20rpx;
  }
  .card-footer button {
    padding: 0 20rpx;
    font-size: 24rpx;
  }
}

@media screen and (min-width: 375px) {
  .service-grid {
    gap: 30rpx 20rpx;
  }
}

@media screen and (min-width: 414px) {
  .icon-container {
    width: 140rpx;
    height: 140rpx;
  }
}

.record-popup {
  padding-bottom: env(safe-area-inset-bottom);
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.message-list {
  height: calc(100vh - 88rpx);
}
.notice-index {
  padding-top: calc(20rpx + constant(safe-area-inset-top));
  padding-top: calc(20rpx + env(safe-area-inset-top));
}
.content-item {
  display: flex;
  margin-bottom: 24rpx;
  align-items: center;
}
